<template>
  <div class="recommend">
    <div class="tit">{{$t("m.recommend")}}</div>
    <div class="con">
      <div
        class="item-article"
        v-for="item in articleList"
        :key="item.id"
        @click="toArticle(item.id)"
      >
        <p>{{ item.title }}</p>
        ·
        <span>大约{{ item.create_time | time }}</span>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      pageSize: 5,
      pageIndex: 1,
      articleList: [],
    };
  },
  created() {
    this.getArticleList();
  },
  computed: {},
  methods: {
    // 获取文章列表
    getArticleList() {
      this.$api
        .getArticleList({
          pageSize: this.pageSize,
          pageIndex: this.pageIndex,
        })
        .then((res) => {
          if (res.success) {
            this.articleList = res.data.data;
          }
        });
    },
    // 跳转文章详情
    toArticle(id) {
      this.$router.push("/layout/article/" + id);
    },
  },
  components: {},
};
</script>
<style lang='scss' scoped>
@import "../assets/scss/_theme.scss";

.recommend {
  width: 90%;
  margin: 0 auto;
  background-color: #fff;
  @include background_color("background_color3");
  .tit {
    height: 40px;
    padding: 0 20px;
    line-height: 40px;
    border-bottom: 1px solid #ccc;
  }
  .con {
    padding: 0 20px;
    .item-article {
      display: flex;
      height: 40px;
      line-height: 40px;
      p {
        margin-right: 5px;
      }
      span {
        margin-left: 5px;
        color: #aeaeae;
      }
    }
    .item-article:hover {
      color: red;
      span {
        color: red;
      }
    }
  }
}
</style>